<template>
  <div class="space-y-6">
    <!-- 统计卡片 -->
    <div class="mb-6">
      <el-row :gutter="20" class="stat-cards">
        <el-col :span="6">
          <el-card class="h-32 hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-center h-full p-4">
              <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
                <el-icon size="24" color="#3b82f6">
                  <User />
                </el-icon>
              </div>
              <div class="flex-1">
                <div class="text-3xl font-bold text-gray-800">{{ stats.totalUsers }}</div>
                <div class="text-sm text-gray-500 mt-1">总用户数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="h-32 hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-center h-full p-4">
              <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
                <el-icon size="24" color="#10b981">
                  <OfficeBuilding />
                </el-icon>
              </div>
              <div class="flex-1">
                <div class="text-3xl font-bold text-gray-800">{{ stats.totalDepartments }}</div>
                <div class="text-sm text-gray-500 mt-1">部门数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="h-32 hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-center h-full p-4">
              <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mr-4">
                <el-icon size="24" color="#f59e0b">
                  <Setting />
                </el-icon>
              </div>
              <div class="flex-1">
                <div class="text-3xl font-bold text-gray-800">{{ stats.totalConfigs }}</div>
                <div class="text-sm text-gray-500 mt-1">配置项</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="h-32 hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-center h-full p-4">
              <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mr-4">
                <el-icon size="24" color="#ef4444">
                  <Document />
                </el-icon>
              </div>
              <div class="flex-1">
                <div class="text-3xl font-bold text-gray-800">{{ stats.totalDicts }}</div>
                <div class="text-sm text-gray-500 mt-1">字典项</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 最近登录用户和系统信息 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="hover:shadow-lg transition-shadow duration-300">
          <template #header>
            <div class="flex items-center justify-between">
              <span class="text-lg font-semibold text-gray-800">最近登录用户</span>
              <el-button type="primary" size="small" text>查看更多</el-button>
            </div>
          </template>
          <el-table :data="recentUsers" style="width: 100%" class="text-sm">
            <el-table-column prop="username" label="用户名" min-width="100" />
            <el-table-column prop="realName" label="真实姓名" min-width="100" />
            <el-table-column
              prop="lastLoginTime"
              label="最后登录时间"
              min-width="150"
              :formatter="(row, column, value) => formatDateTime(value)"
            />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="hover:shadow-lg transition-shadow duration-300">
          <template #header>
            <span class="text-lg font-semibold text-gray-800">系统信息</span>
          </template>
          <el-descriptions :column="1" border class="text-sm">
            <el-descriptions-item label="系统名称" class="font-medium">后台管理系统</el-descriptions-item>
            <el-descriptions-item label="版本" class="font-medium">v1.0.0</el-descriptions-item>
            <el-descriptions-item label="运行环境" class="font-medium">{{ systemInfo.environment }}</el-descriptions-item>
            <el-descriptions-item label="当前时间" class="font-medium">{{ currentTime }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import {
  User,
  OfficeBuilding,
  Setting,
  Document,
} from "@element-plus/icons-vue";
import { formatDateTime } from "@/utils/format";

const stats = reactive({
  totalUsers: 0,
  totalDepartments: 0,
  totalConfigs: 0,
  totalDicts: 0,
});

const recentUsers = ref([]);
const systemInfo = reactive({
  environment: "Development",
});
const currentTime = ref("");

let timer = null;

const updateTime = () => {
  currentTime.value = formatDateTime(new Date());
};

const loadDashboardData = async () => {
  // 这里应该调用实际的API获取数据
  // 暂时使用模拟数据
  stats.totalUsers = 128;
  stats.totalDepartments = 12;
  stats.totalConfigs = 45;
  stats.totalDicts = 156;

  recentUsers.value = [
    {
      username: "admin",
      realName: "管理员",
      lastLoginTime: "2024-01-15 10:30:00",
    },
    {
      username: "user1",
      realName: "张三",
      lastLoginTime: "2024-01-15 09:15:00",
    },
    {
      username: "user2",
      realName: "李四",
      lastLoginTime: "2024-01-15 08:45:00",
    },
  ];
};

onMounted(() => {
  loadDashboardData();
  updateTime();
  timer = setInterval(updateTime, 1000);
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>

<style scoped>
/* 使用Tailwind CSS替代原有样式 */
</style>